<template>
	<view>

		<view class="bg-white">
			<view class="banmi_flex a-c j-b">
				<view class="banmi_flex hede-h-50 flex-1" style="flex-shrink:0;">
					<view v-if="!mobile" class="banmi_flex bg-black j-c a-c hede-w-200" style="flex-shrink:0;">
						<text class="hede_title">{{title}}后台管理</text>
					</view>
					<view v-else class="banmi_flex j-c a-c hede-w-50">
						<view class="" @click="showDrawer('showLeft')">
							<icon-park class="f-20 icon-color" type="hamburger-button" theme="outline" />
						</view>
					</view>
					<view class="flex-1" style="display: flex; width: 0;">
						<scroll-view class="scroll-view_H" :scroll-into-view="timeDistance" scroll-x="true"
							show-scrollbar="false" style="width: 100%;">
							<view :id="'scroll'+index" style="display: inline-block;position: relative;"
								v-for="(item,index) in top_list" :key="index">
								<button @click="on_tab(index,item.url)" class="banmi_flex a-c"
									:class="top_id==item.menu_id?'banmi_hede_select':'banmi_hede'">
									<icon-park v-if="item.icon" class="icon-color f-14 banmi_flex a-c" :type="item.icon"
										theme="outline" />
									<text class="icon-color m-l-5 f-14">{{item.menu_name}}</text>
								</button>
								<view @click="on_close(item.menu_id)" style="position:  absolute;top: 5px;right: 5px;">
									<icon-park class="f-16 icon-color" type="close-one" theme="outline" />
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="banmi_flex a-c hede-h-50 p-l-r-10" style="flex-shrink:0;">
					
					<view class="m-l-5" @mousemove="longpress" @mouseleave="handleMouseLeave">
						<button @click="longpress" class="banmi_flex a-c j-c">
							<text class="f-14">{{account}}</text>
							<icon-park class="f-18 banmi_flex a-c j-c m-l-5 icon-color" type="down" theme="outline" />
						</button>
						<view v-if="is_button" class="triangle-border top" style="width: 60px;">
							<button @click="on_set()" class="banmi_flex j-c a-c">
								<text class="f-14 icon-color">个人设置</text>
							</button>
							<button @click="on_out()" class="banmi_flex j-c a-c">
								<text class="f-14 icon-color">退出系统</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-drawer ref="showLeft" mode="left" :width="200" @change="change($event,'showLeft')">
			<view class="close">
				<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
			</view>
		</uni-drawer>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-up :find="find" :system_version="system_version">
			</uni-popup-up>
		</uni-popup>
		<uni-popup ref="alertDialog_set" type="dialog" :isMaskClick="true">
			<view class="banmi_flex j-c">
				<view class="p-20 b_y banmi_flex j-c bg-white b_y" style="width: 80%;">
					<adminSet class="">
					</adminSet>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import adminSet from '@/mi/admin_set.vue';
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	export default {
		components: {
			IconPark,
			adminSet
		},
		props: {
			version: {
				type: String,
				default: ''
			},

			list_goods: {
				type: Array,
				default: function() {
					return [] //数据
				}
			}
		},
		data() {
			return {
				is_button: false,
				is_plugin_mode: 2,

				title: '',
				codetime: 8,
				find: {},
				name: '',
				system_version: {},
				account: '',
				info: {},
				top_list: [],
				top_id: 0,
				id: '',
				timeDistance: '',
				mobile: '',
				title: uni.getStorageSync('admin_title')


			};
		},
		mounted() {
			var that = this;

			if (navigator.userAgent.indexOf('Mobile') > -1) {
				this.mobile = true;
			} else {
				this.mobile = false;
			}


			let res = this.Banmikeji.GetRequest();


			if (res.banmi_plugin) {
				return
			}



			uni.$on('banmi_top', function(data) {
				var type = 0;
				var index = 0;
				for (var i = 0; i < that.top_list.length; i++) {
					if (that.top_list[i]['menu_id'] == data.find.menu_id) {
						var type = 1;
						var index = i;
					}
				}
				if (type == 0) {
					that.top_list.push(data['find']);
				}
				setTimeout(function() {
					if (type == 0) {
						if (that.top_list.length == 1) {
							that.timeDistance = 'scroll0';
						} else {
							var num = Number(that.top_list.length);
							num = num - 1;
							that.timeDistance = 'scroll' + num
						}
					} else {
						that.timeDistance = 'scroll' + index
					}
				}, 30);
				that.top_id = data.top_id;

			})
			this.account = uni.getStorageSync('account');
			this.admin_token = uni.getStorageSync('admin_token');
			uni.$on('banmi_login', function(data) {
				that.admin_token = uni.getStorageSync('admin_token');
				that.account = uni.getStorageSync('account');
				that.init();
			})
			if (this.admin_token) {
				this.init();
			}

		},
		methods: {

			async init() {
				var that = this;
				const ret = await this.Banmikeji.info_ajax({});
				if (ret.status == 200) {
					this.info = ret.data.info
					uni.setStorage({
						key: 'system_version',
						data: this.info.system_version
					});
					uni.setStorage({
						key: 'pc_web',
						data: this.info.pc
					});
				
				}


			},
			closeDrawer(e) {
				this.$refs[e].close()
			},
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			showDrawer(e) {
				this.$refs[e].open()
			},
			on_set() {
				this.handleMouseLeave()
				this.$refs.alertDialog_set.open()
			},
			handleMouseLeave() {
				this.is_button = false;
			},
			longpress() {
				this.is_button = true;
			},


			on_close(menu_id) {
				this.top_list = this.top_list.filter(t => t.menu_id != menu_id);
			},
			on_tab(index, url) {
				var num = this.top_list[index]['children'].length
				var id = this.top_list[index]['menu_id'];
				var parent_id = this.top_list[index]['parent_id'];
				var plugin_id = this.top_list[index]['plugin_id'];
				var url_local = this.top_list[index]['url_local'];



				if (url_local == 1 && this.Banmikeji.is_env()) {
					url = '/pages/banmi/admin_plugin_view';
				}
				if (url.indexOf("?") != -1) {
					var url = url + '&id=' + id
				} else {
					var url = url + '?id=' + id
				}


				this.top_id = id;
				uni.$emit('banmi_menu', {
					top_id: id,
					parent_id: parent_id
				});
				uni.navigateTo({
					url: url
				})
			},
			on_out() {
				this.handleMouseLeave()
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('admin_token');
							uni.removeStorageSync('account');
							uni.removeStorageSync('account_id');
							uni.reLaunch({
								url: '/pages/index/login'
							})
						}
					}
				});

			},
			

		}
	}
</script>

<style lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		height: 50px;

	}


	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}


	button::after {
		border: none;
	}

	button {
		border-radius: 0;
		background-color: #fff;
		padding: 0px 1px
	}

	.triangle-border {
		position: fixed;
		top: 40px;
		margin-left: -15px;
		padding: 15px;
		border: 1px solid #D3D3D3;
		color: #333;
		background: #fff;
		/* css3 */
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}



	.triangle-border:before {
		content: "";
		display: block;
		/* reduce the damage in FF3.0 */
		position: absolute;
		bottom: -40px;
		/* value = - border-top-width - border-bottom-width */
		left: 35px;
		/* controls horizontal position */
		width: 0;
		height: 0;
		border: 1px solid transparent;
		border-top-color: #D3D3D3;
	}

	/* creates the smaller  triangle */
	.triangle-border:after {
		content: "";
		display: block;
		/* reduce the damage in FF3.0 */
		position: absolute;
		bottom: -26px;
		/* value = - border-top-width - border-bottom-width */
		left: 47px;
		/* value = (:before left) + (:before border-left) - (:after border-left) */
		width: 0;
		height: 0;
		border: 13px solid transparent;
		border-top-color: #fff;
	}

	/* Variant : top
------------------------------------------ */

	/* creates the larger triangle */
	.triangle-border.top:before {
		top: -20px;
		/* value = - border-top-width - border-bottom-width */
		right: 40px;
		/* controls horizontal position */
		bottom: auto;
		left: auto;
		border: 10px solid transparent;
		border-bottom-color: #D3D3D3;
	}

	/* creates the smaller  triangle */
	.triangle-border.top:after {
		top: -19px;
		/* value = - border-top-width - border-bottom-width */
		right: 40px;
		/* value = (:before right) + (:before border-right) - (:after border-right) */
		bottom: auto;
		left: auto;
		border: 10px solid transparent;
		border-bottom-color: #fff;
	}

	.banmi_hede {
		padding: 0 20px;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 50px;

	}

	.banmi_hede_select {
		background-color: #F5F5F5;
		padding: 0 20px;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 50px;

	}

	.hede-w-50 {
		width: 50px;
	}

	.hede-h-50 {
		height: 50px;
	}

	.hede-w-200 {
		width: 260px;
	}

	.hede_title {
		font-size: 17px;
		padding-right: 30px;
		font-weight: 800;
		margin-top: 10px;
		color: #fff;
	}
</style>